.<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js"></script>
	<body>
		<div id="app">
			
				<div><span>姓名:</span><input v-model="name" type="text"></div>
				<div><span>性别</span><input v-model="sex" type="radio" name="sex" value="男">男<input v-model="sex" type="radio" name="sex" value="女">女</div>
				<div><span>爱好</span>
				<input v-model="hobby" type="checkbox" value="basketball">篮球
				<input v-model="hobby" type="checkbox" value="sing">唱歌
				<input v-model="hobby" type="checkbox" value="node">写代码
				</div>
				<div><span>职业</span><select v-model="zhiye" multiple name="">
					<option>老板</option>
					<option>软件工程师</option>
					<option>律师</option>
					<option>教师</option>
				</select></div>
				<div><span>个人简介</span><textarea v-model="gerenjj" name="" id="" cols="30" rows="10">哈哈哈</textarea></div>
				<div><span>年龄</span><input v-model="age" type="text"></div>
				<div><span>城市</span><select v-model="city" name="">
					<option>厦门</option>
					<option>龙岩</option>
					<option>福州</option>
					<option>漳州</option>
				</select></div>
				<div><input type="checkbox" value="basketball" v-model="agree">同意协议<button @click="tijiao()" :disabled="agree===isTrue">提交</button></div>		
			
			<div id="">
				您的个人信息是：
			</div>
			<div>
				{{info}}
			</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				name:"",
				sex:"",
				hobby:[],
				zhiye:[],
				gerenjj:"",
				age:"",
				city:"",
				info:"",
				agree:false,
				isTrue:false
			},
			methods:{
				tijiao(){
					this.info = "用户名-"+this.name+"  性别-"+this.sex+"  爱好-"+this.hobby+"  职业-"+this.zhiye+"  自我介绍-"+this.gerenjj+"  城市-"+this.city;
				}
			},
			computed:{
				
			}
		})
	</script>
</html>